<template>
  <div style="padding: 28px;">
    <div style="display: flex;justify-content: space-between;">
      <div
        style="width: 33%;height: 334px;background: #FFFFFF;padding: 20px 32px;"
      >
        <FootballLevel></FootballLevel>
      </div>

      <div
        style="width: 33%;height: 334px;background: #FFFFFF;padding: 20px 32px;"
      >
        <div style="font-size: 16px;color: #1D2129;font-weight: 500;">
          在校学生数据分析
        </div>
        <div style="display: flex;justify-content: space-between;">
          <div style="width: 40%;">
            <div
              style="width: 100%;height: 127px;background: #F7F8FA;margin-top: 16px;padding-left: 12px;"
            >
              <img
                src="@/assets/img/Frame@2x (3).png"
                alt=""
                style="width: 44px;height: 44px;margin-top: 11px;"
              />
              <div style="font-size: 24px;font-weight: 400;color: #0F0F0F;">
                {{ otherLevel.onSchoolStudentNum }}
              </div>
              <div style="font-size: 11px;font-weight: 400;">
                在校总人数
              </div>
            </div>
            <div
              style="width: 100%;height: 127px;background: #F7F8FA;margin-top: 16px;padding-left: 12px;"
            >
              <img
                src="@/assets/img/Frame@2x (4).png"
                alt=""
                style="width: 44px;height: 44px;margin-top: 11px;"
              />
              <div style="font-size: 24px;font-weight: 400;color: #0F0F0F;">
                {{ otherLevel.joinFootballNum }}
              </div>
              <div style="font-size: 11px;font-weight: 400;">
                c参加足球总人数
              </div>
            </div>
          </div>
          <div
            style="height: 269px;width: 58%;background: #F7F8FA; margin-top:15px"
          >
            <SchoolStudent></SchoolStudent>
          </div>
        </div>
      </div>

      <div
        style="width: 33%;height: 334px;background: #FFFFFF;padding: 20px 32px;"
      >
        <div style="font-size: 16px;color: #1D2129;font-weight: 500;">
          经费投入
        </div>
        <div
          style="width: 100%;height: 127px;background: #F7F8FA;margin-top: 16px;padding-left: 12px;"
        >
          <img
            src="@/assets/img/Frame@2x (3).png"
            alt=""
            style="width: 44px;height: 44px;margin-top: 11px;"
          />
          <div style="font-size: 24px;font-weight: 400;color: #0F0F0F;">
            {{ otherLevel.sportMoney }}
          </div>
          <div style="font-size: 11px;font-weight: 400;">
            当年体育经费总投入（万元）
          </div>
        </div>
        <div
          style="width: 100%;height: 127px;background: #F7F8FA;margin-top: 16px;padding-left: 12px;"
        >
          <img
            src="@/assets/img/Frame@2x (3).png"
            alt=""
            style="width: 44px;height: 44px;margin-top: 11px;"
          />
          <div style="font-size: 24px;font-weight: 400;color: #0F0F0F;">
            {{ otherLevel.footballMoney }}
          </div>
          <div style="font-size: 11px;font-weight: 400;">
            当年足球经费总投入/万元
          </div>
        </div>
      </div>
    </div>

    <div style="margin-top: 16px;display: flex;justify-content: space-between;">
      <div
        style="width: 45%;height: 500px;background: #FFFFFF; padding: 20px 32px;"
      >
        <FootballTeacher></FootballTeacher>
      </div>
      <div
        style="width: 30%;height: 500px;background: #FFFFFF;padding: 20px 32px;"
      >
        <VenueOpening></VenueOpening>
      </div>
      <div
        style="width: 24%;height: 500px;background: #FFFFFF;padding: 20px 32px;"
      >
        <transport></transport>
      </div>
    </div>

    <div style="margin-top: 16px;display: flex;justify-content: space-between;">
      <div
        style="width: 100%;height: 500px;background: #FFFFFF; padding: 20px 32px;"
      >
        <HonorAward></HonorAward>
      </div>
    </div>
  </div>
</template>

<script>
import FootballLevel from "./components/FootballLevel.vue";
import SchoolStudent from "./components/SchoolStudent.vue";
import FootballTeacher from "./components/FootballTeacher.vue";
import VenueOpening from "./components/VenueOpening.vue";
import transport from "./components/transport.vue";
import HonorAward from "./components/HonorAward.vue";
import { get_sheet8_other_level } from "@/api/statistics";

export default {
  components: {
    FootballLevel,
    SchoolStudent,
    FootballTeacher,
    VenueOpening,
    transport,
    HonorAward
  },
  data() {
    return {
      otherLevel: {
        footballMoney: "0",
        joinFootballNum: "0",
        onSchoolStudentNum: "0",
        sportMoney: "0"
      }
    };
  },
  created() {
    this.datalist();
  },

  methods: {
    async datalist() {
      const res = await get_sheet8_other_level({
        year: new Date().getFullYear()
      });
      if (res && res.data && res.data) {
        this.otherLevel = res.data;
      }
    }
  }
};
</script>

<style></style>
